<template>
    <div class="insure">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">保单详情</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <div class="car" v-show="order.orderDetailData.type=='car'">
            <transition name="fade">
                <group class="insure__formPolicy--group">
                    <cell>
                        <span class="insure__list--title" slot="after-title">
                            <span class="insure__iconspan"></span>
                            <span class="insure__iconspan--title">保单信息</span>
                        </span>
                    </cell>
                    <div class="weui-cell vux-cell-form-preview">
                        <div class="weui-form-preview__bd">
                            <div v-show="order.carData.isShowPremium" class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">保费</label>
                                <span class="weui-form-preview__value details-color">
                                    ¥{{order.carData.premium}}
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">保单号</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.carPolicyNo}}
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">开始时间</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.carData.comBeginDate|dataCon}}
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">结束时间</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.carData.comEndDate|dataCon}}
                                </span>
                            </div>
                        </div>
                    </div>
                </group>
            </transition>

            <transition name="fade">
                <group class="insure__formPolicy--group">
                    <cell>
                        <span class="insure__list--title" slot="after-title">
                            <span class="insure__iconspan"></span>
                            <span class="insure__iconspan--title">基本信息</span>
                        </span>
                    </cell>
                    <div class="weui-cell vux-cell-form-preview">
                        <div class="weui-form-preview__bd">
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">投保人</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.carAppli}}
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">被保人</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.carInsured}}
                                </span>
                            </div>

                        </div>
                    </div>
                </group>
            </transition>

            <transition name="fade">
                <group class="insure__formPolicy--group">
                    <cell>
                        <span class="insure__list--title" slot="after-title">
                            <span class="insure__iconspan"></span>
                            <span class="insure__iconspan--title">车辆信息</span>
                        </span>
                    </cell>
                    <div class="weui-cell vux-cell-form-preview">
                        <div class="weui-form-preview__bd">
                            <div v-show="order.carData.comPlates!=''" class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">车牌号</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.carData.comPlates}}
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">车架号</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.carData.frameNum}}
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">发动机号</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.carData.engineNum}}
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">核定载质量</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.carData.ratified}}
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">厂牌车型</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.carData.model}}
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">车辆种类</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.carData.carType}}
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">座位数</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.carData.seats}}
                                </span>
                            </div>
                            <div v-show="order.carData.riskCode='0508'" class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">车船税</label>
                                <span class="weui-form-preview__value details-color">
                                    ¥{{order.carData.vesselTaxAmount}}
                                </span>
                            </div>
                        </div>
                    </div>
                </group>
            </transition>
        </div>
        <div class="other" v-show="order.orderDetailData.type=='other'">
            <transition name="fade">
                <group class="insure__formPolicy--group">
                    <cell>
                        <span class="insure__list--title" slot="after-title">
                            <span class="insure__iconspan"></span>
                            <span class="insure__iconspan--title">保单信息</span>
                        </span>
                    </cell>
                    <div class="weui-cell vux-cell-form-preview">
                        <div class="weui-form-preview__bd">
                            <div v-show="order.carData.isShowPremium" class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">保费</label>
                                <span class="weui-form-preview__value details-color">
                                    {{order.orderDetailData.data.premiumAmount}}&nbsp¥
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">保单号</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.orderDetailData.data.num}}
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">开始时间</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.orderDetailData.data.beginDate|dataCon}}
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">结束时间</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.orderDetailData.data.endDate|dataCon}}
                                </span>
                            </div>
                        </div>
                    </div>
                </group>
            </transition>
            <transition name="fade">
                <group class="insure__formPolicy--group">
                    <cell>
                        <span class="insure__list--title" slot="after-title">
                            <span class="insure__iconspan"></span>
                            <span class="insure__iconspan--title">基本信息</span>
                        </span>
                    </cell>
                    <div class="weui-cell vux-cell-form-preview">
                        <div class="weui-form-preview__bd">
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">投保人姓名</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.orderDetailData.data.policyholder}}
                                </span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label base_color">被保人姓名</label>
                                <span class="weui-form-preview__value base_color">
                                    {{order.orderDetailData.data.insured}}
                                </span>
                            </div>
                        </div>
                    </div>
                </group>
            </transition>
        </div>
        <transition name="fade">
            <group class="insure__formPolicy--group">
                <cell>
                    <span class="insure__list--title" slot="after-title">
                        <span class="insure__iconspan"></span>
                        <span class="insure__iconspan--title">保障条款</span>
                    </span>
                </cell>
                <x-table :cell-bordered="false" style="background-color:#fff;">
                    <thead class="report__table--thead">
                        <tr>
                            <th style="width: 70%;">险别</th>
                            <!-- <th>保险金额</th> -->
                            <th>保额</th>
                        </tr>
                    </thead>
                    <tbody class="report__table--tbody">
                        <tr v-show="order.carData.riskCode='0508'" v-for="(item,index) in order.orderDetailData.data.underwritingDetailsCpsr" :key="index">
                            <td class="report__table--titletd">{{item.type}}</td>
                            <!-- <td>¥{{item.premiumAmount}}</td> -->
                            <td v-show="order.carData.isShowPremium" class="report__table--right">¥{{item.insuredAmount}}</td>
                        </tr>
                        <tr v-for="(item,index) in order.orderDetailData.data.underwritingDetailsCmc" :key="index">
                            <td class="report__table--titletd">{{item.type}}</td>
                            <!-- <td>¥{{item.premiumAmount}}</td> -->
                            <td v-show="order.carData.isShowPremium" class="report__table--right">¥{{item.insuredAmount}}</td>
                        </tr>
                        <tr v-for="(item,index) in order.orderDetailData.data.underwritingDetails" :key="index">
                            <td class="report__table--titletd">{{item.name}}</td>
                            <!-- <td>¥{{item.premiumMain}}</td> -->
                            <td v-show="order.carData.isShowPremium" class="report__table--right">¥{{item.amountMain}}</td>
                        </tr>
                    </tbody>
                </x-table>
            </group>
        </transition>
    </div>
</template>

<script>
import { RequestUrl } from "src/common/url";
import Config from "src/common/config/insureConfig";
import {
    Mutations,
    policyHolderType,
    Gender,
    PerIdentifyType,
    EntIdentifyType,
    benefType,
    insuredidentity,

    RouteUrl
} from "src/common/const";
import {
    XHeader,
    Group,
    Cell,
    XInput,
    Datetime,
    XSwitch,
    Selector,
    XButton,
    XDialog,
    CellFormPreview,
    XTable
} from "vux";
import Validation from "src/common/util/validation";
import DateUtil from "src/common/util/dateUtil";
import { mapState, mapActions } from "vuex";
export default {
    components: {
        CellFormPreview,
        XDialog,
        Selector,
        XHeader,
        Group,
        Cell,
        XInput,
        Datetime,
        XSwitch,
        XButton,
        XTable
    },
    computed: mapState({
        order: "order",
        loading: "loading",
        user: "user",
        isWeChar: "isWeChar"
    }),
    watch: {
    },
    filters: {
        dataCon(val) {
            if (val != "" && typeof (val) != "undefined" && val != "undefined") {
                let year = val.substring(0, 4);
                let month = val.substring(5, 7);
                let day = val.substring(8, 10);
                return year + '-' + month + '-' + day;
                // return DateUtil.getDateStr_YmdByTs(val);
            } else {
                return "";
            }
        },

    },
    data() {
        return {
        };
    },
    methods: {
        goBack() {
            this.$common.goBack(this);
        }
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["CONFIRM_FORM_URL"] = from.path;
        next();
    },
    beforeMount() {
        if (sessionStorage["CONFIRM_FORM_URL"] == "/") {
            this.$common.goUrl(this, RouteUrl.INDEX);
        }
    },
    mounted() {
        document.title = '投保信息';
        let _this = this;
        this.$init.subPageInit(this);
    }
};
</script>

<style scoped  lang="scss">
.base_color {
  color: #414244 !important;
}

.radio-check {
  label {
    vertical-align: middle;
  }
}

.common__clause {
  margin-bottom: 50px;
}

.insure__iconspan {
  position: absolute;
  margin-top: 4px;
  width: 4px;
  height: 18px;
  background-color: #c8161d;
}

.insure__list--title {
  font-size: 15px;
  color: #c8161d;
}

.insure__iconspan--title {
  margin-left: 9px;
  font-size: 14px;
}

.insure__formPolicy {
  border: 1px solid #e7e7e7;
  margin: 0 18px;
}

// .insure__formPolicy--group {
//     .vux-no-group-title {
//         padding-bottom: 20px;
//     }
// }
.insure__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}

.insure__leftbtn {
  float: left;
  width: 35%;
  background: #fff;
  color: #c8161d;
  span {
    color: #f6690a;
  }
}

.insure__rightbtn {
  background: #c8161d;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  transition: opacity 0.1s;
}

.insure__red {
  color: red;
}

.insure__green {
  color: green;
}

.insure__policyHolderType {
  font-size: 12px;
  color: #7f7f7f;
}

.insure__middle {
  display: initial;
  vertical-align: super;
}

.insure__input {
  font-size: 14px;
  color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}

.weui-label {
  font-size: 14px;
  color: #7f7f7f;
}

input::-webkit-input-placeholder {
  font-size: 14px;
  color: #7f7f7f;
}

.insure__img {
  width: 12px;
  vertical-align: middle;
}

.insure__sure {
  vertical-align: middle;
}

.insure__protocol {
  vertical-align: middle;
  color: #c8161d;
}

.insure__radio {
  display: inline-flex;
}

.insure__input--Bene {
  color: #000;
}

.insure__iconspan--delete {
  font-size: 12px;
  color: rgb(163, 163, 163);
  border: 1px solid rgb(222, 222, 222);
  padding: 2px;
}

.insure__base--padding {
  padding-bottom: 20px;
}

.details-color {
  color: #c8161d !important;
}

.insure__clauseRead {
  border-color: aliceblue;
  white-space: pre-wrap;
  vertical-align: top;
  width: 100%;
  font-size: 15px;
  height: 75vh;
  font-family: Microsoft YaHei;
  overflow-y: scroll;
  border: 1px solid #f3f3f3;
}

.dialog-Einv {
  // padding: 15px !important;
  .weui-dialog {
    max-width: 90% !important;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.report__table--thead {
  background-color: #e5ebf2;
  th {
    font-size: 12px;
    color: #808080;
  }
}

.report__table--tbody {
  td {
    font-size: 12px;
    color: #c8161d; // text-align: left;
    // padding-left: 20px;
  }
}

.report__table--titletd {
  font-size: 12px;
  color: #000000 !important;
  text-align: left;
  padding-left: 20px;
}

.report__table--right {
  text-align: right;
  padding-right: 20px;
}
</style>
